<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>芳辰吉日 长乐未央</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
            font-family: '楷体', 'KaiTi', cursive;
            overflow: hidden;
        }

        .container {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .title {
            font-size: 4vw;
            color: #8b0000;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
            animation: scale 2s infinite alternate;
        }

        .subtitle {
            font-size: 2vw;
            color: #cd5c5c;
            margin: 1.5rem 0;
        }

        .poetry {
            font-size: 1.5vw;
            color: #666;
            text-align: center;
            margin: 2rem 0;
            opacity: 0;
            transition: opacity 1s;
            max-width: 80%;
        }

        .decorations {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .petal {
            position: absolute;
            color: #ffb6c1;
            animation: fall linear infinite;
        }

        @keyframes scale {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .icons {
            margin: 20px 0;
        }

        .icons i {
            font-size: 2.5vw;
            margin: 0 1.5vw;
            color: #cd5c5c;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="subtitle">致大佬</h2>
        <h1 class="title">芳辰吉乐 岁岁安康</h1>
        
        <div class="icons">
            <i class="fas fa-birthday-cake"></i>
            <i class="fas fa-music"></i>
            <i class="fas fa-gift"></i>
        </div>

        <div class="poetry" id="poetry"></div>
    </div>

    <div class="decorations" id="decorations"></div>

    <script>
        // 古风诗词库
        const poetrys = [
            "蟠桃捧日三千岁，萱树参天五十围",
            "岁岁春无事，相逢总玉颜",
            "如花似叶，岁岁年年，共占春风",
            "且喜且乐，且以永日，如南山寿"
        ];

        // 诗词轮换
        let currentIndex = 0;
        const poetryElement = document.getElementById('poetry');
        
        function updatePoetry() {
            poetryElement.style.opacity = 0;
            setTimeout(() => {
                poetryElement.textContent = poetrys[currentIndex];
                poetryElement.style.opacity = 1;
                currentIndex = (currentIndex + 1) % poetrys.length;
            }, 1000);
        }
        setInterval(updatePoetry, 4000);
        updatePoetry();

        // 创建花瓣
        function createPetals() {
            const decorations = document.getElementById('decorations');
            for(let i = 0; i < 20; i++) {
                const petal = document.createElement('div');
                petal.className = 'petal';
                petal.innerHTML = '🌸';
                petal.style.left = Math.random() * 100 + 'vw';
                petal.style.animationDuration = Math.random() * 3 + 5 + 's';
                petal.style.animationDelay = Math.random() * 5 + 's';
                petal.style.fontSize = Math.random() * 20 + 10 + 'px';
                decorations.appendChild(petal);
            }
        }
        createPetals();
    </script>
// 微信浏览器全屏适配
document.documentElement.style.height = window.innerHeight + 'px';
window.addEventListener('resize', () => {
    document.documentElement.style.height = window.innerHeight + 'px';
});

// 防止下拉刷新
document.body.addEventListener('touchmove', (e) => {
    if(e.scale !== 1) e.preventDefault();
}, { passive: false });
</body>
</html>